<template>
  <section class="content-wrapper">
    <div class="content-left">
      <el-form :inline="true">
        <slot></slot>
        <collapse-transition>
          <div v-show="show">
            <slot name="collapse"></slot>
          </div>
        </collapse-transition>
        <div v-if="!disabled" class="toggle" @click="show = !show">
          {{show ? '收起' : '展开更多搜索条件'}}<i class="fa" :class="[show ? 'fa-angle-up' : 'fa-angle-up']"></i>
        </div>
      </el-form>
    </div>
    <div class="content-right">
      <slot name="button"></slot>
    </div>
  </section>
</template>

<script>
  /**
   * 搜索区域 组件
   * 分三部分 1、上部搜索区域（不可折叠）2、下部搜索区域（可折叠）3、右部按钮区域（上下排布）
   * 上部搜索区域 为默认slot
   * 下部搜索区域 slot name 为collapse
   * 右部按钮区域 slot name 为button
   */
  import FdForm from '@/components/fd-form.vue'
  import {CollapseTransition} from 'element-ui'
  export default {
    data () {
      return {
        show: false
      }
    },
    components: {
      FdForm,
      CollapseTransition
    },
    props: {
      disabled: Boolean
    },
    methods: {},
    mounted () {
    }
  }
</script>

<style lang="scss">
.content-wrapper{
  display:flex;
  padding: 20px;
  .content-left{
    flex: 1;
    .toggle{
      cursor: pointer;
      font-size: 12px;
      cursor: pointer;
      color:#D3D3D3;
      margin-top: 10px;
    }
  }
  .content-right{
    display: flex;
    button, section{
      display:block;
      width:90px!important;
      height: 38px!important;
    }
    .el-button--primary{
      background: #1868B3;
    }

  }
}
</style>
